<!DOCTYPE html>

<html lang='zh'>

<head>
  <meta charset="UTF-8" />
  <title>科学计算器</title>
  <link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>
  <div class="container">
    <div class="calculator">
    <div class="calculator-title">科学计算器</div>
    <div class="display" id="expression">0</div>
    <div class="display" id="result">0</div>
    <div class="button-grid">
      <button class="button lightblue" id="ans">ANS</button>
      <button class="button darkgreen s_fun" id="sin">sin</button>
      <button class="button darkgreen s_fun" id="cos">cos</button>
      <button class="button darkgreen s_fun" id="tan">tan</button>
      <button class="button orange" id="x!">x!</button>
      <button class="button orange" id="1/x">1/x</button>
      <button class="button darkblue" id="arcsin">arcsin</button>
      <button class="button lightgreen" id="^">^</button>
      <button class="button lightgreen" id="√">√</button>
      <button class="button lightgreen" id="%">%</button>
      <button class="button grey" id="(">(</button>
      <button class="button grey" id=")">)</button>
      <button class="button darkblue" id="arccos">arccos</button>
      <button class="button yellow number" id="7">7</button>
      <button class="button yellow number" id="8">8</button>
      <button class="button yellow number" id="9">9</button>
      <button class="button lightgreen" id="÷">÷</button>
      <button class="button grey" id="ac">AC</button>
      <button class="button darkblue">lg</button>
      <button class="button yellow number" id="4">4</button>
      <button class="button yellow number" id="5">5</button>
      <button class="button yellow number" id="6">6</button>
      <button class="button lightgreen " id="*">*</button>
      <button class="button grey" id="ce">CE</button>
      <button class="button darkblue">ln</button>
      <button class="button yellow number" id="1">1</button>
      <button class="button yellow number" id="2">2</button>
      <button class="button yellow number" id="3">3</button>
      <button class="button lightgreen" id="-">-</button>
      <button class="button grey" id="grey">←</button>
      <button class="button darkblue" id="π">π</button>
      <button class="button darkblue">e</button>
      <button class="button yellow number" id="0">0</button>
      <button class="button yellow" id=".">.</button>
      <button class="button lightgreen" id='+'>+</button>
      <button class="button lightblue" id="=">=</button>
    </div>
  </div>
    <div class="interest-calculator">
      <div class="calculator-title">利率计算器</div>

      <div class="deposit-section">
        <h2>存款</h2>
        <label for="deposit-amount">存款金额：</label>
        <input type="number" id="deposit-amount" name="deposit-amount" required><br>

        <label for="deposit-year">存款时长（年）：</label>
        <input type="number" id="deposit-year" name="deposit-year" required><br>

        <button class="button orange" id="c">计算存款利息</button>
        <div class="display" id="deposit-result">0</div>
      </div>

      <div class="loan-section">
        <h2>贷款</h2>
        <label for="loan-amount">贷款金额：</label>
        <input type="number" id="loan-amount" name="loan-amount" required><br>

        <label for="loan-year">贷款时长（年）：</label>
        <input type="number" id="loan-year" name="loan-year" required><br>

        <button class="button orange" id="d">计算贷款利息</button>
        <div class="display" id="loan-result">0</div>
      </div>
    </div>
  </div>>
  <div id="history" class="history">
    <h2>历史记录</h2>
    <ul id="history-list">
      <li>loading...</li>
      <!-- 模拟的历史记录项 -->
    </ul>
  </div> 
  <script type="text/javascript" src="calc.js"></script>
  <script type="text/javascript" src="task.js"></script>

</body>
<script>
  //初始化历史记录
  a()
  id_data_key = { 'ac': 1, 'ce': 1, 'grey': 1, 'ans': 1 }; // 清除列表
  test_data = []; // 记录输入操作
  result_data = []//存放结果
  document.querySelector('.button-grid').addEventListener('click', (event) => {
    classList = event.target.classList;
    id = event.target.id;

    if (id_data_key[id] !== undefined) {
      return;
    }

    classValue = classList[2];

    if (id == '÷') {
      console.log(1);
      test_data.push('\/')
    } else if (id == 'π') {
      test_data.push('3.1416')
    } else if (id == 'e') {
      test_data.push('2.71828')
    } else {
      test_data.push(document.getElementById(id).innerText);
    }

    console.log(test_data);

    // 更新表达式的文本
    document.getElementById('expression').innerText = test_data.join('');
  });

  document.getElementById('ac').onclick = function () {
    document.getElementById('result').innerText = '0';
    document.getElementById('expression').innerText = '0';
    test_data.length = 0; // 清空输入操作记录数组
  };

  document.getElementById('grey').onclick = function () {
    test_data.length == 1 ? test_data[0] = '0' : test_data.pop();

    document.getElementById('expression').innerText = test_data.join('');

  };
  document.getElementById('=').onclick = async function () {

    value = eval(document.getElementById('expression').innerText);

    if (value != Infinity && !isNaN(value)) {
      document.getElementById('result').innerText = value
      result_data.push(value)
      response = await fetch('http://127.0.0.1:5000/', {
        method: 'POST',
        contentType: 'application/json',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          'jisuan': test_data,
          'result': value
        })
      })
      
    } else {
      alert('输入无效')
    }
  }
  document.getElementById('ans').onclick = function () {
    result_data.length != 0 ? document.getElementById('result').innerText = result_data[result_data.length - 1] : alert('暂无上次操作记录')

  }

</script>
<script>
  function findMaxRange(arr, value) {
    arr.sort((a, b) => a - b); // 将数组按升序排序

    for (let i = 0; i < arr.length - 1; i++) {
      if (value >= arr[i] && value <= arr[i + 1]) {
        return arr[i + 1];
      }
    }

    return arr[arr.length - 1]; // 如果值比所有元素都大，返回最大的元素
  }

  document.getElementById("c").addEventListener("click", function () {
    li_data = { 0.25: 0.285, 0.5: 0.0305, 1: 0.0325, 2: 0.0415, 3: 0.0475, 5: 0.0525 }
    li_data_keys = [0.25, 0.5, 1, 2, 3, 5]
    let c_time = eval(document.getElementById("deposit-year").value)
    let money = eval(document.getElementById("deposit-amount").value)
    let lixi = 0
    for (let i = 0; i < li_data_keys.length; i++) {

      if (c_time <= li_data_keys[i]) {
        lixi = li_data[li_data_keys[i]]

        break;
      }
    }

    if (!(c_time % 1 == 0) && c_time < 1) {
      time = 12 * c_time

      result_money = time * lixi * money


    } else if (c_time >= 1) {
      result_money = c_time * lixi * money


    }
    document.getElementById('deposit-result').innerText = result_money
  })
</script>
<script>
  document.getElementById("d").addEventListener("click", function () {
    li_data = { 0.5: 0.585, 1: 0.0631, 2: 0.0640, 3: 0.0665, 5: 0.0680 }
    li_data_keys = [0.5, 1, 2, 3, 5]
    let c_time = eval(document.getElementById("loan-year").value)
    let money = eval(document.getElementById("loan-amount").value)
    let lixi = 0
    for (let i = 0; i < li_data_keys.length; i++) {

      if (c_time <= li_data_keys[i]) {
        lixi = li_data[li_data_keys[i]]

        break;
      }
    }

    if (!(c_time % 1 == 0) && c_time < 1) {
      time = 12 * c_time

      result_money = time * lixi * money


    } else if (c_time >= 1) {
      result_money = c_time * lixi * money


    }
    document.getElementById('loan-result').innerText = result_money
  })
</script>
</html>